<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- 这里使用的是实例中的isShow变量 -->
            <cpn v-show="isShow"></cpn>
        </div>
        <template id="cpn">
            <div>
                <h2>我是子组件</h2>
                <p>我是内容，哈哈哈</p>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                isShow: true
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            isShow: false
                        }
                    },
                }
            }
        })
        </script>
    </body>
</html>